<template>
  <div>
    <van-skeleton title row="3" :loading="loading">
      <div class="ha">
        <van-nav-bar title="商品详情" fixed="true" left-arrow @click="bank" />
      </div>

      <!-- 轮播图start -->
      <div>
        <div class="photo">
          <van-swipe indicator-dots="{{true}}" autoplay="{{false}}">
            <van-swipe-item v-for="image in images" :key="image">
              <img width="100%" height="300" :src="image" mode="aspectFill" />
            </van-swipe-item>
          </van-swipe>
        </div>
      </div>
      <!-- 轮播图end -->
      <!-- 详情start -->
      <div class="info">
        <span class="price">￥{{ price }}</span>
        <van-tag type="danger" class="sales" style="float:right;">热销:{{detail.sales}}</van-tag>
        <p class="name">{{ detail.name }}</p>
        <span class="specs">规格:{{ detail.specs }}</span>
        <p class="supplier">供应商：{{ detail.supplier }}</p>
        <p class="detail">{{ detail.explain }}</p>
        <p class="num">剩余库存：{{ detail.inventory - detail.sales }}</p>
        <van-tag type="primary" class="carnum">购物车内数量：{{ selectedCount }}</van-tag>
      </div>
      <!-- 详情end -->
      <!-- 购物车start -->
      <div class="action">
        <div style="margin:10px;">
          <van-row>
            <van-col bindtap="home" span="4" @click="home">
              <i class="iconfont icon-shouye"></i>
              首页
            </van-col>
            <van-col span="6" bindtap="goCar">
              <van-icon @click="goCar" name="cart-o" size="20px" :badge="cars.total" />购物车
            </van-col>
            <van-col span="14">
              <div class="action-right">
                <div class="car" @click="add(detail)">加入购物车</div>
                <div class="buy" @click="buy(detail)">立即购买</div>
              </div>
            </van-col>
          </van-row>
        </div>
      </div>
      <!-- 购物车end -->
    </van-skeleton>
  </div>
</template>

<script>
import { useRouter } from "vue-router";
import { toRefs, reactive, onMounted } from "vue";
import { getSingleGoods } from "../../api/goods";
import { showToast } from "vant";
export default {
  setup() {
    const router = useRouter();
    const data = reactive({
      id: "",
      detail: [],
      images: [],
      loading: true,
      cars: {
        total: 0,
        sum: 0,
        data: []
      },
      price: 0,
      selectedCount: 0
    });
    data.id = router.currentRoute.value.params.id;

    const events = {
      home() {
        router.push("/");
      },
      // 立即购买
      buy(val) {
        let inventory = val.inventory - val.sales;
        if (val.carCount >= inventory) {
          showToast("库存不足");
          return;
        }
        if (data.cars.data.length === 0) {
          data.cars.data.push(val);
          val.carCount = 1;
        } else {
          let car = data.cars.data.find(d => d.id == val.id);
          if (car === undefined) {
            val.carCount = 1;
            car.carCount++;
            data.cars.data.push(val);
          } else {
            car.carCount++;
          }
        }

        data.cars.total++;
        data.cars.sum +=
          Math.round(
            (val.isPromote === 1 ? val.promotePrice : val.price) * 100
          ) / 100; //总价
        data.cars.sum = Math.round(data.cars.sum * 100) / 100;
        data.selectedCount = val.carCount;
        localStorage.setItem("cart", JSON.stringify(data.cars));
        router.push("/car");
      },
      // 加入购物车
      add(val) {
        let inventory = val.inventory - val.sales;
        if (val.carCount >= inventory) {
          showToast("库存不足");
          return;
        }
        if (data.cars.data.length === 0) {
          data.cars.data.push(val);
          val.carCount = 1;
          data.cars.total++;
          data.selectedCount = val.carCount;
        } else {
          data.cars = JSON.parse(localStorage.getItem("cart"));
          let car = data.cars.data.find(d => d.id == val.id);
          if (car === undefined) {
            val.carCount = 1;
            data.cars.data.push(val);
          } else {
            car.carCount++;
            data.cars.total++;
            data.selectedCount = car.carCount;
          }
        }

        // car.carCount = val.carCount;

        data.cars.sum +=
          Math.round(
            (val.isPromote === 1 ? val.promotePrice : val.price) * 100
          ) / 100; //总价
        data.cars.sum = Math.round(data.cars.sum * 100) / 100;

        localStorage.setItem("cart", JSON.stringify(data.cars));
      },
      goCar() {
        if (data.cars.total === 0) {
          showToast("购物车是空的");
          return;
        }
        router.push("/car");
      },
      bank() {
        router.go(-1);
      }
    };

    onMounted(() => {
      // 获取单个商品详情
      getSingleGoods({
        id: data.id
      }).then(res => {
        if (res.result === 0) {
          let img = [];
          data.detail = res.data;
          if (data.detail == 1) {
            data.price = Math.round(data.detail.promotePrice * 100) / 100;
          } else {
            data.price = Math.round(data.detail.price * 100) / 100;
          }
          img.push(res.data.photo);
          if (res.data.qualifications.length != 0) {
            res.data.qualifications.forEach(d => {
              img.push(d);
            });
          }
          data.images = img;
          data.loading = false;
        }
      });
      //   详情end
      if (localStorage.getItem("cart") != null) {
        data.cars = JSON.parse(localStorage.getItem("cart"));
      } else {
        data.cars.total = 0;
        data.cars.sum = 0;
        data.cars.data = [];
      }

      data.cars.data.forEach(d => {
        if (d.id === data.id) {
          data.selectedCount = d.carCount;
        }
      });
    });

    return {
      ...toRefs(data),
      ...events
    };
  }
};
</script>

<style scoped>
.action-right {
  background-color: brown;
  display: flex;
  height: 30px;
  top: 0px;
  width: 100%;
  border-radius: 40px;

  text-align: center;
  line-height: 30px;
  color: #fff;
  font-size: 12px;
}
.action {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  position: absolute;
  bottom: 0px;
  width: 100%;
  height: 45px;
  border-top: 1px solid #eee;
  padding: 0px;
}
.car {
  text-align: center;
  width: 100%;
  border-right: 1px solid #eee;
  background: linear-gradient(to right, #e97f07, #ff976a);
  border-top-left-radius: 40px;
  border-bottom-left-radius: 40px;
}

.buy {
  text-align: center;
  width: 100%;
  border-top-right-radius: 40px;
  border-bottom-right-radius: 40px;
  background: linear-gradient(to right, #f05023, #ee0a24);
}
.carnum {
  font-size: 14px;
  float: right;
  position: relative;
  bottom: 15px;
}
.detail {
  color: #909090;
  font-size: 12px;
}
.num {
  color: #909090;
  font-size: 13px;
  margin: 13px 0 0 0;
}
.supplier {
  color: red;
  font-weight: bold;
}
.specs {
  color: #909090;
  border: 1px solid #909090;
  border-radius: 2px;
}
.name {
  font-size: 20px;
  font-weight: bolder;
  margin: 5px;
}
.sales {
  font-size: 15px;
}
.price {
  color: red;
  font-size: 20px;
  font-weight: bold;
}
.info {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  padding: 10px;
  position: relative;
}
.ha {
  /* height: calc(100vh - 100px); */
  overflow: auto;
  line-height: 50px;
  /* margin-top: 50px; */
  height: 50px;
}
</style>